<template>
  <div class='edit-page'>
    <!-- <img :src="photoUrl" alt="" style='width:100%'> -->
    <div class='photo_wrap'>
      <img :src="imgInfo.url" alt="" class='photo' mode='widthFix' @click='handlePreview'>
    </div>
    <div class='select_wrap'>
      <p class='title'>
        添加微调部位:
      </p>
      <div class='btn_wrap'>
        <span class='btn_item' :class='{select: item.selected}' v-for='(item,index) in btns' :key='index' v-text='item.comment' @click='handleCheck(index)'></span>
      </div>
      <!-- <div class='showMore' @click.stop='ToggleShowMore'>
        <span class='showMore_text' v-text='show? "收起":"查看更多"'></span>
      </div> -->
    </div>
    <p class='line'></p>
    <div>
      <textarea class='textarea' placeholder="说出您想要的样子..." :maxlength='-1' v-model='textarea'></textarea>
    </div>
    <cover-view class='submit_wrap'>
      <cover-view class='submit' @click.stop='handleSubmit'>提交</cover-view>
    </cover-view>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import TYPE from '../../enums/type'
export default {
  name: 'Edit',
  data () {
    return {
      show: false,
      btns: [],
      moreBtns: [
        {
          value: '1',
          label: '牙齿',
          selected: false
        },
        {
          value: '2',
          label: '嘴巴',
          selected: false
        }
      ],
      textarea: ''
    }
  },
  created () {
    console.dir(TYPE)
    this.btns = Object.assign([], Object.values(TYPE))
  },
  computed: {
    ...mapState([
      'photoUrl', 'imgInfo', 'openId'
    ])
  },
  methods: {
    checkClass (item) {
      console.log(item)
      return this.selected.findIndex(ele => { ele === item }) !== -1
    },
    ToggleShowMore () {
      if (this.show) {
        this.btns.splice(4, ) // eslint-disable-line
        this.show = false
      } else {
        this.btns = this.btns.concat(this.moreBtns)
        this.show = true
      }
    },
    handlePreview: function (e) { // 预览 TODO: 将图片地址变为在线地址
      const _this = this
      wx.previewImage({
        urls: [_this.imgInfo.url],
        success (res) {
          console.log('预览成功')
          console.dir(res)
        },
        fail (res) {
          console.log('预览失败')
        }
      })
    },
    toggleClass (v) {
      console.log(v)
      console.log(this.select.findIndex(item => { return item === v }) !== -1)
      return this.select.findIndex(item => { return item === v }) !== -1
    },
    handleCheck (index) {
      this.btns[index].selected = !this.btns[index].selected
    },
    handleSubmit () {
      const partList = this.btns.filter(item => {
        return item.selected
      }).map(item => {
        return item.value
      })
      this.$http.post('/wapp/desired', {
        params: {
          openId: this.openId.openid,
          description: this.textarea,
          partList: partList,
          fileList: [this.imgInfo.uname]
        }
      }).then(res => {
        console.log(res)
        if (res) {
          this.textarea = ''
          this.btns = this.btns.map(item => {
            item.selected = false
            return item
          })
          wx.showToast({
            title: '提交成功！',
            icon: 'success'
          })
          setTimeout(() => {
            wx.redirectTo({
              url: '/pages/index/index'
            })
          }, 2000)
        }
      }).catch(err => {
        console.log('失败')
        console.dir(err)
      })
    }
  },
  mounted () {
    console.dir(this.imgInfo)
  }
}
</script>

<style scoped lang='less'>
  .edit-page{
    padding:25rpx;
    height:100vh;
    box-sizing: border-box;
    // border:1px solid red;
    .photo_wrap{
      box-sizing: content-box;
      height:660rpx;
      // border:1px solid red;
      overflow: hidden;
      background:#F3F3F3;
      .photo{
        width:100%;
      }
    }
    .select_wrap{
      margin-top:35rpx;
      .title{
        font-size:28rpx;
        margin-bottom:16rpx;
      }
      .btn_wrap{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .btn_item{
          padding:0 38rpx;
          height:56rpx;
          line-height: 60rpx;
          border:1px solid #E7E7E7;
          color:#999;
          font-size: 24rpx;
          margin:12rpx 22rpx;
          border-radius: 5rpx;
        }
        .select{
          border:1px solid #EE5DC0;
          color:#EE5DC0;
        }
      }
      .showMore{
        border-top:1px solid #f3f3f3;
        margin: 18rpx -25rpx 0 -25rpx;
        padding:20rpx;
        text-align: center;
        .showMore_text{
          color:#999;
          font-size:26rpx;
        }
      }
    }
    .line{
      height:20rpx;
      background: #F3F3F3;
      margin:30rpx -25rpx;
      margin-top:0;
    }
    .textarea{
      box-sizing: border-box;
      width: 100%;
      padding:15rpx;
      font-size:28rpx;
      height:1000rpx;
    }
    .submit_wrap{
      position: fixed;
      bottom:0;
      height:150rpx;
      // border:1px solid red;
      left:0;
      right:0;
      z-index: 1000;
      // background:#666;
      .submit{
        position: fixed;
        bottom:20rpx;
        width:542rpx;
        left:104rpx;
        text-align: center;
        background:#EE5DC0;
        color:#fff;
        // padding:25rpx 0;
        border-radius:40rpx;
        font-size:30rpx;
        height:80rpx;
        line-height: 80rpx;
      }
    }
  }
</style>
